import { useLoaderData } from "react-router-dom";
import { sleep } from "../utils";

/**
 * loader 函数，用于加载数据
 */
export async function loader() {
  await sleep(2000);
  const resp = await fetch("http://localhost:3000/about").then((response) =>
    response.json()
  );

  return Promise.reject("接口出错");

  // 返回接口数据
  return resp;
}

export default function About() {
  console.log("About");

  /**
   * 用于获取当前组件About所应用的路由/about配置的loader所返回的数据
   */
  const state: any = useLoaderData();
  console.log("state", state);

  return (
    <div>
      <h2>About</h2>
      <p>公司名：{state?.name}</p>
      <p>公司电话：{state?.phone}</p>
    </div>
  );
}
